
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA_97Ip04_pcg4-y91fqk8iRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSGnboiyY1VzOyB-taGLpsEHgQ7sQ" type="text/javascript"></script>
<script type="text/javascript" src="${TemplateUtils.context}/scripts/jquery-1.2.4a.js"></script>
<script type="text/javascript" src="${TemplateUtils.context}/scripts/mapstraction.js"></script>
<script type="text/javascript" src="${TemplateUtils.context}/scripts/mapstraction-geocode.js"></script>


<div style="width: 600px; height: 400px;" id="map">

</div>

<div>
</div>


<script type="text/javascript">
$().ready(function() {
	
	mapstraction = new Mapstraction('map','google');
	mapstraction.doSelection = false;
	
	mapstraction.addControls({
	    zoom: 'large',
		overview: true,
		scale: true
	});
	
		var myPoint = new LatLonPoint(-37.814251,144.963169);
		mapstraction.setCenterAndZoom(myPoint, 10);

	mapstraction.clickHandler = function(lat, lon, point) {
		var curLat = lat;
		var curLon = lon;
		var zoom = this.getZoom();
		if (zoom == 0) zoom = 0.1;
		
		var zoomFactor = 300 / (zoom * zoom) * .05;
		
		var left = lat - zoomFactor;
		var right = lat + zoomFactor;
		var top = lon + zoomFactor;
		var bottom = lon - zoomFactor;
		
		if (mapstraction.nearbyDocs != null && mapstraction.nearbyDocs.length > 0) {
			mapstraction.nearbyDocs.each (function(item) {
				mapstraction.removeMarker(item);
			});
		}
		
		var polyLine = new Polyline([new LatLonPoint(left, top),
			new LatLonPoint(right, top),
			new LatLonPoint(right, bottom),
			new LatLonPoint(left, bottom),
			new LatLonPoint(left, top)]);
			polyLine.setWidth('3');
			polyLine.setColor('red');
			if (mapstraction.searchBox != null) {
				mapstraction.removePolyline(mapstraction.searchBox);
			}
			mapstraction.addPolyline(polyLine);
			mapstraction.searchBox = polyLine;
		
		mapstraction.nearbyDocs = new Array();
		
		$.getJSON('${TemplateUtils.context}/service/caas/nearbydocs?lat='+curLat+'&lon='+curLon+'&zoom='+zoomFactor, function(data) {
			data.each (function(item) {
				
					var myPoint = new LatLonPoint(item.lat, item.lon);
					var theMarker = new Marker(myPoint);
					
					var url = '<a href="${TemplateUtils.context}/n/showDocDetails/workspace/SpacesStore/'+item.id+'" >'+item.name+'</a>';
					
					theMarker.setInfoBubble(url);
					theMarker.setIcon('${TemplateUtils.context}/scripts/dd-start.png');
					mapstraction.addMarker(theMarker);
					mapstraction.nearbyDocs[mapstraction.nearbyDocs.length] = theMarker;
			});
			
			

		});
	};

	
});



function enableButtons()
{
	$('.map-control').each(function() {
		this.disabled = false;
	});
}

function disableButtons()
{
	$('.map-control').each(function() {
		this.disabled = true;
	});
}


</script>
